<template>
	<section class="trendBox" >
		<el-form ref="customer" label-position="top" :inline="true" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                	<el-form-item label="渠道:">
                        <el-select v-model="channel">
						    <el-option
						      v-for="item in channelOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
                </el-col>
                <el-col :span="4">
                	<el-form-item label="查询时间:">
	                    <el-date-picker
						    v-model="datePicker"
						    type="daterange"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
                </el-col>
           </el-row>
           <el-row>
           		<el-col :span="12" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="getTrendData" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
           </el-row>
        </el-form>
        <highcharts :options="charts"></highcharts>
	</section>
</template>

<script>
	import Vue from 'vue'
	import {Form,Row,Col,FormItem,Select,Option,DatePicker,Button,Message} from 'element-ui';
	import VueHighcharts from "vue-highcharts"
	import Highcharts from  "highcharts";
	import { mapGetters, mapActions, mapMutations } from 'vuex';
	import { getDate, setToken, getCookie} from '../../utils/auth';
	import {Charts,channelOptions} from '~/assets/js/option_dataCharts'

	Vue.use(VueHighcharts, { Highcharts })
	Vue.use(Form);
	Vue.use(Row);
	Vue.use(Col);
	Vue.use(FormItem);
	Vue.use(Select);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Button);
	Vue.use(Message);

	export default {
		head(){
            return {
                title: this.title,
            }
        },
		data() {
			return {
				tabName: '趋势',
				title: "趋势",
				channelOptions: channelOptions,
		        channel: '1',//查询渠道
		        datePicker:[],//查询时间
		        applyTimeBegin:'',//查询开始时间
		        applyTimeEnd:'',//查询结束时间
		        charts:Charts,
			}
		},


		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList'
			})
		},
		methods: {
			empty () {//清空筛选条件
				this.channel='1',
		        this.datePicker=[],
		        this.applyTimeBegin='',
		        this.applyTimeEnd=''
			},
			getTrendData(){
				if(this.gmtCreateInterval&&this.gmtCreateInterval[0]){
	    			this.applyTimeBegin = this.gmtCreateInterval[0]?getDate(this.gmtCreateInterval[0],true):'';
                    this.applyTimeEnd =  this.gmtCreateInterval[1]?getDate(this.gmtCreateInterval[1],true):'';
	    		}else{
					this.applyTimeBegin = ''
					this.applyTimeEnd = ''
				}
	    		
	    		this.$store.dispatch('getSearchTrendChart',{
	    				channel:this.channel,
	    				applyTimeBegin:this.applyTimeBegin,
	    				applyTimeEnd:this.applyTimeEnd
	    		}).then((response) => {
		            if(!response){return}
		            let result = response.data;
		            if (result.successed && result.successed == true) {
		              	console.log(result)
		            } else {
		              Message.warning({
		                message: result.message
		              });
		            }
		          })
		          .catch((error) => {
		            Message.error({
		              message: result.message
		            });
		          });
			}
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
		},
		mounted() {
			this.getTrendData()
		}
	}
</script>

<style lang="scss">
	.trendBox{
		margin-top: 20px;
	}
</style>